<!-- 行情中心 -->
<template>
<!-- <el-row class="w"> -->
  <!-- <Navtab/> -->
  <el-col :span="14">
    <!-- 沪深行情 -->
    <div class="mIndex_con">
      <!-- 三大盘指数 -->
      <el-row>

        <el-col :span="8">
          <div class="shangzheng">
            <div class="head">
              <!-- <h2 class="title"><a href="http://localhost:8080/#/market/hsindex/szzs">{{szzsData.name}}</a></h2> -->
              <h2 class="title"><a href="http://localhost:8080/#/market/0000001">{{$store.state.szzsData.name}}</a></h2>
              <div class="point-info stock-up">
                <div class="price">
                  {{($store.state.szzsData.price).toFixed(2)}}
                  <span v-if="$store.state.szzsData.percent>0"><i class="el-icon-top"></i></span>
                  <span v-else-if="$store.state.szzsData.percent<0"><i class="el-icon-bottom"></i></span>
                </div>
                <div class="percent">
                  <span class="text-left" v-if="$store.state.szzsData.updown>0">{{'+'+($store.state.szzsData.updown).toFixed(2)}}</span>
                  <span class="text-left" v-else>{{($store.state.szzsData.updown).toFixed(2)}}</span>
                  <span class="text-center" v-if="$store.state.szzsData.percent>0">{{'+'+($store.state.szzsData.percent*100).toFixed(2)+'%'}}</span>
                  <span class="text-left" v-else>{{$store.state.szzsData.percent}}</span>
                  <span class="text-right">{{($store.state.szzsData.turnover/100000000).toFixed(2)+"亿"}}</span>
                </div>
              </div>
            </div>
            <div class="body">
              <a href="http://localhost:8080/#/market/0000001">
              <img src="http://img1.money.126.net/chart/hs/time/210x140/0000001.png?{$VERSION}" :alt="$store.state.szzsData.name">
              </a>
            </div>
            <div class="footer">
              <ul>
                <li class="text-left stock-up">{{'最高:'+($store.state.szzsData.high).toFixed(2)}}</li>
                <li class="text-right stock-down">{{'最低:'+($store.state.szzsData.low).toFixed(2)}}</li>
              </ul>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="shenzhen">
            <div class="head">
              <h2 class="title"><a href="http://localhost:8080/#/market/1399001">{{$store.state.szczData.name}}</a></h2>
              <div class="point-info stock-up">
                <div class="price">
                  {{($store.state.szczData.price).toFixed(2)}}
                  <span v-if="$store.state.szczData.percent>0"><i class="el-icon-top"></i></span>
                  <span v-else-if="$store.state.szczData.percent<0"><i class="el-icon-bottom"></i></span>
                </div>
                <div class="percent">
                  <span class="text-left" v-if="$store.state.szczData.updown>0">{{'+'+($store.state.szczData.updown).toFixed(2)}}</span>
                  <span class="text-left" v-else>{{($store.state.szczData.updown).toFixed(2)}}</span>
                  <span class="text-center" v-if="$store.state.szczData.percent>0">{{'+'+($store.state.szczData.percent*100).toFixed(2)+'%'}}</span>
                  <span class="text-left" v-else>{{$store.state.szczData.percent}}</span>
                  <span class="text-right">{{($store.state.szczData.turnover/100000000).toFixed(2)+"亿"}}</span>
                </div>
              </div>
            </div>
            <div class="body">
              <a href="http://localhost:8080/#/market/1399001">
              <img src="http://img1.money.126.net/chart/hs/time/210x140/1399001.png?{$VERSION}" :alt="$store.state.szczData.name">
              <!-- <img :src="['https://img1.money.126.net/chart/hs/time/210x140/'+$store.state.szczData.code+'.png']" :alt="$store.state.szczData.name"> -->
              </a>
            </div>
            <div class="footer">
              <ul>
                <li class="text-left stock-up">{{'最高:'+($store.state.szczData.high).toFixed(2)}}</li>
                <li class="text-right stock-down">{{'最低:'+($store.state.szczData.low).toFixed(2)}}</li>
              </ul>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="hushen300">
            <div class="head">
              <h2 class="title"><a href="http://localhost:8080/#/market/1399300">{{$store.state.hs300Data.name}}</a></h2>
              <div class="point-info stock-up">
                <div class="price">
                  {{($store.state.hs300Data.price).toFixed(2)}}
                  <span v-if="$store.state.hs300Data.percent>0"><i class="el-icon-top"></i></span>
                  <span v-else-if="$store.state.hs300Data.percent<0"><i class="el-icon-bottom"></i></span>
                </div>
                <div class="percent">
                  <span class="text-left" v-if="$store.state.hs300Data.updown>0">{{'+'+($store.state.hs300Data.updown).toFixed(2)}}</span>
                  <span class="text-left" v-else>{{($store.state.hs300Data.updown).toFixed(2)}}</span>
                  <span class="text-center" v-if="$store.state.hs300Data.percent>0">{{'+'+($store.state.hs300Data.percent*100).toFixed(2)+'%'}}</span>
                  <span class="text-left" v-else>{{$store.state.hs300Data.percent}}</span>
                  <span class="text-right">{{($store.state.hs300Data.turnover/100000000).toFixed(2)+"亿"}}</span>
                </div>
              </div>
            </div>
            <div class="body">
              <a href="http://localhost:8080/#/market/1399300">
              <!-- https://img1.money.126.net/chart/hs/time/210x140/1399300.png -->
              - <img src="http://img1.money.126.net/chart/hs/time/210x140/1399300.png?{$VERSION}" :alt="$store.state.hs300Data.name"> -->
              </a>
            </div>
            <div class="footer">
              <ul>
                <li class="text-left stock-up">{{'最高:'+($store.state.hs300Data.high).toFixed(2)}}</li>
                <li class="text-right stock-down">{{'最低:'+($store.state.hs300Data.low).toFixed(2)}}</li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <el-button slot="append" icon="el-icon-search" @click="getHSIndex"></el-button> -->

      <ScrollList/>
    </div>
    <div class="mPanel_con">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="行业板块涨跌" name="mIndustryUD">
          <MPanelCommon/>
        </el-tab-pane>
        <el-tab-pane label="概念板块涨跌" name="mConceptUD">
          <MPanelCommon/>
        </el-tab-pane>
        <el-tab-pane label="地域板块涨跌" name="mAreaUD">
          <MPanelCommon/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-col>
<!-- </el-row> -->
</template>

<script>
import ScrollList from './ScrollList.vue'
import MPanelCommon from './MPanelCommon.vue'

export default {
  data() {
    return {
      /* szzsData:{},
      szczData:{},
      hs300Data:{}, */
      activeName:'mIndustryUD',
    }
  },
  methods: {
    handleClick(){
      console.log(this.activeName);
      if(this.activeName=="mIndustryUD"){
        this.$store.commit('setmIndustryData')
      }else if(this.activeName=="mConceptUD"){
        this.$store.commit('setmConceptData')
      }else if(this.activeName=="mAreaUD"){
        this.$store.commit('setmAreaData')
      }
    }
    /* getHSIndex(){
      jsonp('http://api.money.126.net/data/feed/RANK_SC_PLATE_HANGYE_ALL,RANK_SC_PLATE_HANGYE_UP,RANK_SC_PLATE_HANGYE_DOWN,RANK_SC_PLATE_GAINIAN_ALL,0000001,1399001,1399300,HSRANK_COUNT_SHA,HSRANK_COUNT_SZA,HSRANK_COUNT_SH3,RANK_SC_PLATE_GAINIAN_UP,RANK_SC_PLATE_GAINIAN_DOWN,RANK_SC_PLATE_DIYU_UP,RANK_SC_PLATE_DIYU_DOWN,RANK_AUP,RANK_A5MINUP,RANK_ADOWN,RANK_A5MINDOWN,RANK_ATURNOVERUP,RANK_AHSUP,RANK_AVOLUMECHGUP,RANK_AZFUP,RANK_KCBUP,RANK_KCB5MINUP,RANK_KCBDOWN,RANK_KCB5MINDOWN,RANK_KCBCJL,RANK_KCBHS,RANK_KCBLB,RANK_KCBZF,RANK_ZXBUP,RANK_ZXB5MINUP,RANK_ZXBDOWN,RANK_ZXB5MINDOWN,RANK_ZXBCJL,RANK_ZXBHS,RANK_ZXBLB,RANK_ZXBZF,RANK_CYBUP,RANK_CYB5MINUP,RANK_CYBDOWN,RANK_CYB5MINDOWN,RANK_CYBCJL,RANK_CYBHS,RANK_CYBLB,RANK_CYBZF,RANK_BUP,RANK_B5MINUP,RANK_BDOWN,RANK_B5MINDOWN,RANK_BTURNOVERUP,RANK_BHSUP,RANK_BVOLUMECHGUP,RANK_BZFUP,TING_PAI_TI_SHI_RANK,XIN_GU_SHANG_SHI_RANK,XIAN_SHOU_JIE_JIN_RANK,FEN_HONG_SONG_GU_RANK,RANK_SC_GONG_GAO',{},(err,res)=>{
        if(!err){
          console.log(res);
          this.szzsData=res['0000001'];
          console.log(this.szzsData);
          this.szczData=res['1399001'];
          console.log(this.szczData);
          this.hs300Data=res['1399300'];
          console.log(this.hs300Data);
        }
      });
    } */
  },
  mounted:function () {
    this.$store.dispatch('getHSMain')
    // this.$store.commit('setmIndustryData')
    // this.handleClick()
  },
  components:{
      ScrollList,
      MPanelCommon
  }
}
</script>

<style>
/* 沪深行情大容器 */
.mIndex_con {
  /* width: 768px; */
  /* height: 550px; */
  box-shadow: 1px 1px 3px #ddd;
  padding-bottom: 15px;
  margin-bottom: 18px;
  background-color: #fff;
  padding: 5px 0 20px 30px;
}
.title {
  line-height: 30px;
  height: 30px;
  font-family: STHeiti,Microsoft YaHei;  
}
.title a {
  font-size: 15px;
  font-weight: bold;
  color: #2b2b2b;
  background: transparent;
  zoom: 1;
  clear: both;
}
.title a:hover {
  color: orange;
}

.price {
  color: #ee5f5B;
  font-size: 32px;
  font-family: Tahoma,Arial;
}
.percent{
  display: flex;
  justify-content: space-between;
  padding: 2px 40px 0 5px;
  color: #ee5f5B;
  font-size: 14px;
  font-family: Tahoma,Arial;
}

.body {
  padding: 15px 0;
}

.footer ul {
  padding: 0;
  margin: 0;
}
.footer ul li{
  list-style: none;
  float: left;
  font-size: 10px;
  font-family: Tahoma,Arial;
  padding:0 20px;
}
li.text-left {
  color: #ee5f5B;
}
li.text-center {
  color: #5a5656;
}
li.text-right {
  color: #62c462;
}
.news-time {
  z-index: 999;
  color:#959595;
  font-size: 12px;
  font-family: Arial,宋体;
  margin: 0 12px 0 0;
}
</style>
